import { computed, defineComponent, ref } from "vue";
import style from "./index.module.less";
import PageTitle from "@/components/PageTitle";
import Form from "@/components/Form";
import { IFormItem, IFormRef } from "@/components/Form/types";
import ButtonView from "@/components/ButtonView";
import CardView from "@/components/CardView";
import { useRequest } from "./request";
import FormGroup from "@/components/FormGroup";
import { FormGroupPropsData } from "@/components/FormGroup/types";
import { useRoute } from "vue-router";
export default defineComponent({
  name: "",
  setup() {
    const route = useRoute();
    const formRef = ref<IFormRef>();
    const { confirm, workList, detailInfo } = useRequest();
    const data = computed<FormGroupPropsData[]>(() => [
      {
        data: [
          {
            label: "真实姓名",
            type: "input",
            key: "name",
            readonly: true,
            rules: [
              {
                required: true,
              },
            ],
          },
          {
            label: "联系电话",
            type: "input",
            key: "phone",
            readonly: true,
            rules: [
              {
                required: true,
              },
            ],
          },
          {
            label: "类型",
            type: "select",
            key: "workType",
            rules: [
              {
                required: true,
              },
            ],
            typeData: workList.value,
          },
          {
            label: "空闲人数",
            type: "input",
            key: "freeOneNum",
            rules: [
              {
                required: true,
              },
            ],
          },
          {
            label: "空闲天数",
            type: "calendar",
            props: {
              type: "range",
            },
            keys: ["startFreeDate", "endFreeDate"],
            rules: [
              {
                required: true,
              },
            ],
          },
          {
            label: "价格",
            type: "input",
            key: "workPrice",
            rules: [
              {
                required: true,
              },
            ],
          },
          {
            label: "是否选择公开",
            type: "switch",
            key: "ifPublic",
          },
        ],
      },
    ]);
    return () => {
      return (
        <PageTitle title="帮用工">
          <div class={"p-[10px]"}>
            <FormGroup
              data={data.value}
              v-model={detailInfo.value}
              ref={formRef}
              class="m-child-top-20"
            />
            <ButtonView
              block
              type="primary"
              class="!mt-[50px] !h-[40px]"
              onClick={() => {
                formRef.value?.submit(({ result, error, submitState }) => {
                  submitState && confirm(detailInfo.value);
                });
              }}
            >
              确定
            </ButtonView>
          </div>
        </PageTitle>
      );
    };
  },
});
